<template>
  <!-- banner   START -->
  <div class="container-fluild">
    <div class="row long-row">
      <span class="title">新闻动态</span>
      <img src="./images/slide-news.png" alt="news" />
    </div>
  </div>
  <!-- banner   END -->
  <router-view></router-view>
</template>

<script>
  export default {
    name: "News",
  };
</script>

<style scoped>
  /* banner  START */
  .long-row {
    position: relative;
    overflow: hidden;
  }

  .long-row .title {
    position: absolute;
    z-index: 9;
    top: 50%;
    margin-top: -26px;
    left: 50%;
    margin-left: -80px;
    font-size: 40px;
    font-family: "Source Han Sans CN";
    font-weight: 300;
    color: #333;
    user-select: none;
  }

  .long-row img {
    width: 100%;
    transition: transform 2s linear;
  }

  .long-row:hover img {
    transform: scale(1.12);
  }

  /* banner  END */
</style>